<script setup>
/**
    const time = ref();
    watch(()=>props.conf.modelValue,(newVal,oldVal)=>{
        console.log('modelValue   ',newVal);
    })
    const handlerChangeTime = (val)=>{
        emit('timeChange',val);
    }
 */
//import * as dayjs from 'dayjs';
import { Plus } from "@element-plus/icons-vue";
import icon from '../icon.vue';
import { watch, getCurrentInstance, ref } from "vue";
import { ElMessage as message } from "element-plus";

import { getRemoteData } from "./composition";
import dayjs from "dayjs";
// const emit = defineEmits(['update:modelValue', 'valChange','clear']); // 明确声明事件
const props = defineProps(["conf", "modelValue"]);
// 统一值变更处理
// const handleValueChange = (val) => {
//   emit('update:modelValue', val);
//   emit('valChange', props.conf.id, val);
// };

// 统一清除处理
// const handleClear = () => {
//   const clearedValue = null; // 清除时统一设为null
//   // emit('update:modelValue', clearedValue);
//   // emit('valChange', props.conf.id, clearedValue);
//   emit('clear', props.conf.id, clearedValue);
// };
const { appContext } = getCurrentInstance();

watch(
  () => props.conf.dataType,
  (newVal, oldVal) => {
    getRemoteData(appContext, props.conf);
  }
);
// 上传组件处理
const handleUploadChange = (fileList) => {
  console.log("文件列表变化:", fileList);
  // 可以在这里添加自定义处理逻辑
};
// 树节点点击处理
const handleTreeNodeClick = (data) => {
  console.log("节点点击:", data);
  // 可以在这里添加业务逻辑
};

// 数据加载逻辑
watch(
  () => props.conf.dataType,
  async (newVal) => {
    if (newVal === "dynamic") {
      try {
        await getRemoteData(appContext, props.conf);
      } catch (error) {
        ElMessage.error("加载树数据失败");
      }
    }
  },
  { immediate: true }
);
</script>
<template>
   <!-- 树形选择器 -->
  <el-tree-select
    v-if="conf.compType == 'treeSelect'"
    v-model="conf.modelValue"
    :data="conf.treeData"
    :props="conf.props"
    :multiple="conf.multiple"
    :collapse-tags="conf['collapse-tags']"
    :clearable="conf.clearable"
    :disabled="conf.disabled"
    :show-checkbox="conf.showCheckbox"
    :placeholder="conf.placeholder"
    :filterable="true"
  />
  <!--下拉-->
  <el-select
    v-if="props.conf.compType === 'select'"
    v-model="props.conf.modelValue"
    :multiple="props.conf.multiple"
    :collapse-tags="props.conf['collapse-tags']"
    :disabled="props.conf.disabled"
    :filterable="props.conf.filterable"
    :clearable="props.conf.clearable"
  >
    <el-option
      :label="item.label"
      :value="item.value"
      :key="item"
      v-for="item in props.conf.options"
    >
    </el-option>
  </el-select>
  <!-- 上传组件 -->
  <fancy-upload
    v-if="props.conf.compType === 'upload'"
    :conf="props.conf"
    v-model="props.conf.modelValue"
    @file-change="handleUploadChange"
  />
  <!-- Tree组件 -->
  <fancy-tree
    v-if="props.conf.compType === 'tree'"
    :conf="props.conf"
    v-model="props.conf.modelValue"
    @node-click="handleTreeNodeClick"
  />
  <!--输入框-->

  <el-input
    v-if="props.conf.compType === 'input'"
    v-model="props.conf.modelValue"
    :readonly="props.conf.readonly"
    :clearable="props.conf.clearable"
    :disabled="props.conf.disabled"
    :placeholder="props.conf.placeholder"
    :suffix-icon="props.conf['suffix-icon']"
    :prefix-icon="props.conf['prefix-icon']"
  >
    <template #prepend v-if="props.conf.prepend !== ''">{{
      props.conf.prepend
    }}</template>
    <template #append v-if="props.conf.append">
      <el-tooltip
        :content="props.conf.tooltip.content"
        :placement="props.conf.tooltip.placement"
        :effect="props.conf.tooltip.effect"
      >
        <!-- <el-icon v-if="props.conf.tooltip.icon != ''"
          ><component :is="props.conf.tooltip.icon"></component
        ></el-icon> -->
        <icon v-if="props.conf.tooltip.icon != ''" :code="props.conf.tooltip.icon" />
        <span v-else>联</span>
      </el-tooltip>
    </template>
  </el-input>
  
  <!--单选-->
  <div style="text-align: center; display: block">
    <el-radio-group
      v-if="props.conf.compType === 'radio'"
      v-model="props.conf.modelValue"
      :class="{ verticalDiv: props.conf.vertical }"
    >
      <div v-for="item in props.conf.options">
        <el-radio
          :label="item.value"
          :key="item"
          :border="props.conf.border"
          v-if="props.conf.optionType === 'default'"
        >
          {{ item.label }}
        </el-radio>
        <el-radio-button
          :label="item.value"
          :key="item"
          v-if="props.conf.optionType === 'button'"
        >
          {{ item.label }}
        </el-radio-button>
      </div>
    </el-radio-group>
  </div>

  <!--多选-->
  <el-checkbox-group
    v-if="props.conf.compType === 'checkbox'"
    v-model="props.conf.modelValue"
    :clearable="props.conf.clearable"
    :disabled="props.conf.disabled"
    :size="props.conf.size"
    :max="props.conf.max"
    :min="props.conf.min"
  >
    <div v-for="item in props.conf.options" v-if="props.conf.vertical">
      <el-checkbox
        :border="props.conf.border"
        :value="item.value"
        :key="item"
        v-if="props.conf.optionType === 'default'"
      >
        {{ item.label }}
      </el-checkbox>
      <el-checkbox-button
        :value="item.value"
        :key="item"
        v-if="props.conf.optionType === 'button'"
      >
        {{ item.label }}
      </el-checkbox-button>
    </div>
    <div v-if="!props.conf.vertical">
      <el-checkbox
        :border="props.conf.border"
        :value="item.value"
        :key="item"
        v-for="item in props.conf.options"
        v-if="props.conf.optionType === 'default'"
      >
        {{ item.label }}
      </el-checkbox>
      <el-checkbox-button
        :value="item.value"
        :key="item"
        v-for="item in props.conf.options"
        v-if="props.conf.optionType === 'button'"
      >
        {{ item.label }}
      </el-checkbox-button>
    </div>
  </el-checkbox-group>
  <!--开关-->
  <el-switch
    v-if="props.conf.compType === 'Switch'"
    v-model="props.conf.modelValue"
    :disabled="props.conf.disabled"
    :active-color="props.conf['active-color']"
    :inactive-color="props.conf['inactive-color']"
    :active-value="props.conf['active-value']"
    :inactive-value="props.conf['inactive-value']"
  >
  </el-switch>
  <!--计数器-->
  <el-input-number
    v-if="props.conf.compType === 'inputNumber'"
    v-model="props.conf.modelValue"
    :placeholder="props.conf.placeholder"
    :min="props.conf.min"
    :max="props.conf.max"
    :step="props.conf.step"
    :precision="props.conf.precision"
    :step-strictly="props.conf['step-strictly']"
    :controls-position="props.conf['controls-position']"
    :disabled="props.conf.disabled"
    :readonly="props.conf.readonly"
  >
  </el-input-number>
  <!--多行文本-->
  <el-input
    v-if="props.conf.compType === 'textarea'"
    v-model="props.conf.modelValue"
    :readonly="props.conf.readonly"
    :clearable="props.conf.clearable"
    :type="props.conf.type"
    :placeholder="props.conf.placeholder"
    :maxlength="props.conf.maxlength"
    :show-word-limit="props.conf['show-word-limit']"
    :disabled="props.conf.disabled"
    :rows="props.conf.rows"
  >
  </el-input>
  <!--滑块-->
  <el-slider
    v-if="props.conf.compType === 'slider'"
    v-model="props.conf.modelValue"
    :min="props.conf.min"
    :max="props.conf.max"
    :step="props.conf.step"
    :show-stops="props.conf['show-stops']"
    :show-tooltip="props.conf['show-tooltip']"
    :range="props.conf.range"
    :disabled="props.conf.disabled"
  ></el-slider>
  <!--评分-->
  <el-rate
    v-if="props.conf.compType === 'rate'"
    v-model="props.conf.modelValue"
    :disabled="props.conf.disabled"
    :max="props.conf.max"
    :allow-half="props.conf['allow-half']"
    :show-score="props.conf['show-score']"
  ></el-rate>
  <!--日期-->
  <el-date-picker
    v-if="props.conf.compType === 'date'"
    v-model="props.conf.modelValue"
    :placeholder="props.conf.placeholder"
    :disabled="props.conf.disabled"
    :clearable="props.conf.clearable"
    :readonly="props.conf.readonly"
    :type="props.conf.type"
    :format="props.conf.format"
    :range-separator="props.conf['range-separator']"
    :start-placeholder="props.conf['start-placeholder']"
    :end-placeholder="props.conf['end-placeholder']"
  ></el-date-picker>
  <!--时间-->
  <el-time-picker
    v-if="props.conf.compType === 'time'"
    v-model="props.conf.modelValue"
    :placeholder="props.conf.placeholder"
    :disabled="props.conf.disabled"
    :readonly="props.conf.readonly"
    :clearable="props.conf.clearable"
  >
  </el-time-picker>
  <!--颜色选择器-->
  <el-color-picker
    v-if="props.conf.compType === 'colorPicker'"
    v-model="props.conf.modelValue"
    :disabled="props.conf.disabled"
    :predefine="props.conf.predefine"
    :size="props.conf.size"
  ></el-color-picker>
  <!--级联选择器-->
  <el-cascader
    v-if="props.conf.compType === 'cascader'"
    v-model="props.conf.modelValue"
    :disabled="props.conf.disabled"
    :clearable="props.conf.clearable"
    :size="props.conf.size"
    :show-all-levels="props.conf['show-all-levels']"
    :separator="props.conf.separator"
    :props="props.conf.props"
    :options="props.conf.options"
    :filterable="props.conf.filterable"
  ></el-cascader>

  <!--按钮-->
  <el-button
    v-if="props.conf.compType === 'button'"
    :disabled="props.conf.disabled"
    :size="props.conf.size"
    :type="props.conf.type"
    :plain="props.conf.plain"
    :round="props.conf.round"
    :circle="props.conf.circle"
  >
    {{ props.conf.text }}
  </el-button>
  <!--分割线-->
  <el-divider
    v-if="props.conf.compType === 'divider'"
    :content-position="props.conf['content-position']"
  >
    {{ props.conf.text }}
  </el-divider>
  <!--提示-->
  <el-alert
    v-if="props.conf.compType === 'alert'"
    :title="props.conf.title"
    :type="props.conf.type"
    :effect="props.conf.effect"
    :center="props.conf.center"
    :closable="props.conf.closable"
    :close-text="props.conf['close-text']"
    :show-icon="props.conf['show-icon']"
    :description="props.conf.description"
  ></el-alert>
  <!--文字链接-->
  <el-link
    v-if="props.conf.compType === 'link'"
    :type="props.conf.type"
    :href="props.conf.href"
    :underline="props.conf.underline"
    :disabled="props.conf.disabled"
    :target="props.conf.target"
  >
    {{ props.conf.text }}
  </el-link>
  <!--文本-->
  <fancy-text
    v-if="props.conf.compType === 'text'"
    :align="props.conf.align"
    :size="props.conf.size"
    :bold="props.conf.bold"
    :color="props.conf.color"
  >
    {{ props.conf.text }}
  </fancy-text>
  <!--编辑器-->
  <fancy-editor
    v-if="props.conf.compType === 'editor'"
    v-model="props.conf.modelValue"
    :max="props.conf.max"
    :validateMaxText="props.conf.validateMaxText"
  ></fancy-editor>
  <!--选择列表-->
  <fancy-dialog-list
    v-if="props.conf.compType === 'dialogList'"
    v-model="props.conf.modelValue"
    :disabled="props.conf.disabled"
    :title="props.conf.title"
    :multi="props.conf.multi"
    :showIndex="props.conf.showIndex"
    :action="props.conf.action"
    :height="props.conf.height"
    :colConf="props.conf.colConf"
    :dval="props.conf.dval"
    :dlabel="props.conf.dlabel"
  ></fancy-dialog-list>
  <!--条码-->
  <fancy-bar-code
    v-if="props.conf.compType === 'barCode'"
    v-model="props.conf.modelValue"
    :format="props.conf.format"
    :lineColor="props.conf.lineColor"
    :background="props.conf.background"
    :height="props.conf.height"
    :fontSize="props.conf.fontSize"
    :displayValue="props.conf.displayValue"
  ></fancy-bar-code>
</template>
<style scoped>
.verticalDiv {
  display: table;
  float: left;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.tree-operations {
  margin-left: 10px;
}
</style>
